<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button onclick="fun1();">按钮1</button>
        <br>
<!--        vue的事件绑定，对应的事件函数必须在Vue对象的methods块中-->
        <button v-on:click="fun2()">按钮2</button>
        <br>
        <button @click="fun3('123')">按钮3</button>
        <br>

        <hr>
        <input type="text" v-model="msg">
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        //定义数据模型
        data:{
            msg:""
        },
        //定义vue对象的行为
        methods:{
            fun2(){
                //this表示的是当前的vue对象
                alert("按钮2..." + this.msg)
            },
            fun3(str){
                alert("按钮3..." + str)
            }
        }
    });


    function fun1(){
        alert("按钮1....")
    }
</script>

</html>